<template>
	<div>
		<div class="m-tabarea m-tabarea-index" data-reactid="27">
			<nav class="u-tab f-bd f-bd-btm" data-reactid="28">
				<li class="tabtitle" data-reactid="29" v-for="item in list" :class="curComponents == item ? 'z-selected' : null " @click="curComponents = item">
					<div class="tabtxt" data-reactid="30">
						<span data-reactid="31">{{Select(item)}}</span>
					</div>
				</li>
			</nav>
		</div>
		<component :is="curComponents"></component>
	</div>
</template>

<script>
	import newsong from './newsong'
	import hot from './Hot'
	import search from './Search'
	export default {
		data() {
			return {
				list: ["newsong", "hot", "search"],
				curComponents: "newsong"
			}
		},
		components: {
			newsong,
			hot,
			search
		},
		methods: {
			Select(item) {
				if(item === "newsong") {
					return "推荐音乐"
				} else if(item === "hot") {
					return "热歌榜"
				} else {
					return "搜索"
				}
			}
		}
	}
</script>

<style scoped>
	.m-tabarea-index {
		padding-top: 40px;
	}
	
	.m-tabarea {
		margin: 0 auto;
	}
	
	.m-tabarea-index .u-tab:after {
		content: "";
		border-color: #ccc;
		z-index: 0;
	}
	
	.m-tabarea-index .u-tab {
		position: fixed;
		top: 64px;
		left: 0;
		z-index: 100;
	}
	
	.u-tab {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		width: 100%;
		height: 40px;
		background: #fff;
	}
	
	.u-tab .z-selected .tabtxt {
		color: #d33a31;
	}
	
	.u-tab .tabtxt {
		position: relative;
		display: inline-block;
		height: 100%;
		padding: 0 5px;
		box-sizing: border-box;
		color: #333;
		font-size: 15px;
		line-height: 40px;
	}
	
	.u-tab .tabtitle {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		width: 33.3%;
		height: 100%;
		text-align: center;
		cursor: pointer;
	}
	
	.u-tab .z-selected .tabtxt:after {
		content: "";
		position: absolute;
		left: 0;
		bottom: -1px;
		z-index: 3;
		width: 100%;
		height: 4px;
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background: #d33a31;
	}
	
	.f-bd:after {
		position: absolute;
		z-index: 2;
		content: "";
		top: 0;
		left: 0;
		pointer-events: none;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		-webkit-transform-origin: top left;
		transform-origin: top left;
		border: 0 solid rgba(0, 0, 0, .1);
	}
	
	.f-bd-btm:after {
		border-bottom-width: 1px;
	}
	
	li {
		list-style: none;
	}
</style>